﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>jquery聊天窗口小部件</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="/admin/js/layui/chatRecords/reset.min.css">
    <link rel='stylesheet' href='/admin/js/layui/chatRecords/font-awesome.min.css'>
    <link rel="stylesheet" href="/admin/js/layui/chatRecords/style.css">
    <link rel="stylesheet" href="/admin/js/layui/chatRecords/button-style.css">
</head>
<body>
<div class="group-container">
    <div class="multi-button skin3">
        <button onclick="showFriends();">好友</button>
        <button onclick="showGroups();">群组</button>
    </div>
</div>
<div class="container">
    <!-- partial:index.partial.html -->
    <div class="container clearfix">
        <div class="people-list" id="people-list">
            <ul class="list">
                <!--单聊-->
                <div id="singleListId">
                    <li th:each="user : ${singleList}" class="clearfix" th:onclick="'goToDetails(\'' + ${user.toUserId} + '\', \'' + ${user.receiverPortraitUri} + '\');'">
                        <img style="width: 55px;height: 55px;" th:src="${user.receiverPortraitUri}" alt="avatar" />
                        <div class="about">
                            <div class="name" th:text="${user.receiverName}">Vincent111 Porter</div>
                            <div class="status">
                                <i class="fa fa-circle online"></i> online
                            </div>
                        </div>
                    </li>
                </div>
                <!--群聊-->
                <div id="groupListId">
                    <li th:each="group : ${groupList}" class="clearfix" th:onclick="'goToGroupDetails(\'' + ${group.toUserId} + '\', \'' + ${group.groupPortraitUri} + '\');'">
                        <img style="width: 55px;height: 55px;" th:src="${group.groupPortraitUri}" alt="avatar" />
                        <div class="about">
                            <div class="name" th:text="${group.groupName}">Vincent111 Porter</div>
                            <div class="status">
                                <i class="fa fa-circle online"></i> online
                            </div>
                        </div>
                    </li>
                </div>
            </ul>
        </div>

        <div class="chat">
            <!--详情顶部-->
            <!--<div class="chat-header clearfix">-->
                <!--<img id="receiverPortraitUriId" style="height: 30px;width: 30px;display: none;" src="" alt="avatar" />-->
                <!--<i class="fa fa-star"></i>-->
            <!--</div>-->

            <div class="chat-history">
                <ul id="chatId">
                </ul>
            </div>
        </div>

    </div>
    <script src='/admin/js/layui/chatRecords/jquery.min.js'></script>
    <script src='/admin/js/layui/chatRecords/handlebars.min.js'></script>
    <script src='/admin/js/layui/chatRecords/list.min.js'></script>
    <script src='/admin/js/layui/chatRecords/chroma.min.js'></script>
    <!--<script src="/admin/js/layui/chatRecords/script.js"></script>-->
    <script src="/admin/js/layui/layui.js"></script>
    <script th:inline="javascript">

        var singleList = [[${singleList}]];
        var groupList = [[${groupList}]];
        var user = [[${user}]];

        $(function () {
            showFriends();
        })
        
        function showFriends() {
            $("#singleListId").show();
            $("#groupListId").hide();
        }

        function showGroups() {
            $("#singleListId").hide();
            $("#groupListId").show();
        }
        function goToDetails(toUserId, receiverPortraitUri) {

            $.ajax({
                type: "post",
                url: [[${basePath}]] + "/message/person/singleChatRecord",
                data: {
                    fromUserId: user.id,
                    toUserId: toUserId,
                },
                success: function (res) {
                    if (res.success) {
                        // 顶部头像
                        $("#receiverPortraitUriId").show();
                        $("#receiverPortraitUriId").attr("src", receiverPortraitUri);
                        var data = res.data;
                        var chatHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            if (user.id == item.fromUserId) {
                                chatHtml += "<li class=\"clearfix\">";
                                chatHtml += "<div class=\"message-data align-right\">";
                                chatHtml += "<span class=\"message-data-time\">"+item.createTime+"</span> &nbsp; &nbsp;";
                                chatHtml += "<span class=\"message-data-name-self\">"+item.sendName+"</span>";
                                chatHtml += "</div>";
                                chatHtml += "<div class=\"message other-message float-right\">";
                                if (item.objectName == "RC:TxtMsg") {
                                    chatHtml += ""+item.text+"";
                                }else if (item.objectName == "RC:ImgMsg") {
                                    chatHtml += "<img src=\""+item.content+"\" />";
                                }else {
                                    chatHtml += "消息类型不支持";
                                }

                                chatHtml += "</div>";
                                chatHtml += "</li>";
                            }
                            else {
                                chatHtml += "<li>";
                                chatHtml += "<div class=\"message-data\">";
                                chatHtml += "<span class=\"message-data-name\"></i>"+item.sendName+"</span>";
                                chatHtml += "<span class=\"message-data-time\">"+item.createTime+"</span>";
                                chatHtml += "</div>";
                                chatHtml += "<div class=\"message my-message\">";
                                if (item.objectName == "RC:TxtMsg") {
                                    chatHtml += ""+item.text+"";
                                }else if (item.objectName == "RC:ImgMsg") {
                                    chatHtml += "<img src=\""+item.content+"\" />";
                                }else {
                                    chatHtml += "消息类型不支持";
                                }
                                chatHtml += "</div>";
                                chatHtml += "</li>";
                            }

                            console.log(item); // 打印当前元素
                        }

                        $("#chatId").html(chatHtml);
                    } else {
                        layer.msg(res.msg, {icon: 2}, 2000);
                    }
                }
            });

        }
        function goToGroupDetails(toUserId, receiverPortraitUri) {
            $.ajax({
                type: "post",
                url: [[${basePath}]] + "/message/person/groupChatRecord",
                data: {
                    groupId: toUserId
                },
                success: function (res) {
                    if (res.success) {
                        // 顶部头像
                        $("#receiverPortraitUriId").show();
                        $("#receiverPortraitUriId").attr("src", receiverPortraitUri);
                        var data = res.data;
                        var chatHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            if (user.id == item.fromUserId) {
                                chatHtml += "<li class=\"clearfix\">";
                                chatHtml += "<div class=\"message-data align-right\">";
                                chatHtml += "<span class=\"message-data-time\">"+item.createTime+"</span> &nbsp; &nbsp;";
                                chatHtml += "<span class=\"message-data-name-self\">"+item.sendName+"</span>";
                                chatHtml += "</div>";
                                chatHtml += "<div class=\"message other-message float-right\">";
                                if (item.objectName == "RC:TxtMsg") {
                                    chatHtml += ""+item.text+"";
                                }else if (item.objectName == "RC:ImgMsg") {
                                    chatHtml += "<img src=\""+item.content+"\" />";
                                }else {
                                    chatHtml += "消息类型不支持";
                                }

                                chatHtml += "</div>";
                                chatHtml += "</li>";
                            }
                            else {
                                chatHtml += "<li>";
                                chatHtml += "<div class=\"message-data\">";
                                chatHtml += "<span class=\"message-data-name\"></i>"+item.sendName+"</span>";
                                chatHtml += "<span class=\"message-data-time\">"+item.createTime+"</span>";
                                chatHtml += "</div>";
                                chatHtml += "<div class=\"message my-message\">";
                                if (item.objectName == "RC:TxtMsg") {
                                    chatHtml += ""+item.text+"";
                                }else if (item.objectName == "RC:ImgMsg") {
                                    chatHtml += "<img src=\""+item.content+"\" />";
                                }else {
                                    chatHtml += "消息类型不支持";
                                }
                                chatHtml += "</div>";
                                chatHtml += "</li>";
                            }

                            console.log(item); // 打印当前元素
                        }

                        $("#chatId").html(chatHtml);
                    } else {
                        layer.msg(res.msg, {icon: 2}, 2000);
                    }
                }
            });
        }
    </script>
</body>
</html>
